<template>
  <div>
    <v-preview title="总览" :list="previews" class="bd-1 bdr-10 pd-10"/>
    <v-boss-wallet class="wallet bd-1 bdr-10 pd-10" :wallet="wallet" @refresh="getWallet"/>
    <div class="statistics">
      <v-charts class="pd-10 bdr-10 bd-1" title="利润统计" v-model="chartDate" @refresh="getChart" ref="charts"/>
      <v-bi class="pd-10 bdr-10 bd-1" :list="biList"/>
    </div>
    <div class="rank  bdr-10 bd-1">
      <div
              class="pd-10"
              v-for="item in tableDataList"
              :key="item.expand.path">
        <div class="top">
          <span>{{item.expand.title}} <i class="iconfont icon-paihang"></i> </span>
          <em @click="$router.push(item.expand.path)">查看排行榜 <i class="iconfont icon-chakangengduo"></i> </em>
        </div>
        <v-plain-table
                :operation="false"
                :pagination="false"
                :data="item"/>
      </div>
    </div>

  </div>
</template>
<script lang="ts">
  import { Component, Vue } from 'vue-property-decorator'
  import vPreview from '@/components/home-components/preview'
  import vBossWallet from '@/components/home-components/boss-wallet'
  import vBi from '@/components/home-components/bi'
  import vCharts from '@/components/home-components/charts'
  import vPlainTable from '@/components/plain-table'
  import { Getter } from 'vuex-class'

  @Component({
    components: {
      vPreview, vBossWallet, vBi, vCharts, vPlainTable
    }
  })
  export default class Boss extends Vue {
    previews = [
      {
        path: '/transaction/order/list',
        title: '超时订单',
        value: ''
      },
      {
        path: '/transaction/inventory/list',
        title: '待审核票据',
        value: ''
      },
      {
        path: '/transaction/offer/list',
        title: '待调价票据',
        value: ''
      },
      {
        path: '/platform/member/list',
        title: '新增企业',
        value: ''
      },
      {
        path: '/platform/channel-provider/list',
        title: '新增渠道商',
        value: ''
      },
      {
        path: '/platform/member/list',
        title: '企业会员',
        value: ''
      }
    ]
    wallet = {}
    chartDate = 30
    biList = [
      {
        title: '本月挂票数量（张）',
        value: ''
      },
      {
        title: '本月订单数量（笔）',
        value: ''
      },
      {
        title: '本月交易额（元）',
        value: ''
      },
      {
        title: '本月利润合计（元）',
        value: ''
      },
      {
        title: '本日挂票数量（张）',
        value: ''
      },
      {
        title: '本日订单数量（笔）',
        value: ''
      },
      {
        title: '本日交易额（元）',
        value: ''
      },
      {
        title: '平均单笔利润（元）',
        value: ''
      }
    ]
    tableDataList: TableData[] = [
      {
        header: [
          {
            key: 'spec_name',
            label: '姓名'
          },
          {
            key: 'channel_sum',
            label: '渠道数量'
          },
          {
            key: 'ent_sum',
            label: '企业数量'
          },
          {
            key: 'turn_over',
            label: '交易额'
          }
        ],
        body: [],
        footer: {
          total: 999,
          currentPage: 1
        },
        expand: {
          title: '渠道专员业绩排名',
          path: 'rank-boss/1'
        }
      },
      {
        header: [
          {
            key: 'channel_name',
            label: '渠道商名称'
          },
          {
            key: 'clerk_sum',
            label: '业务员数量 '
          },
          {
            key: 'ent_sum',
            label: '企业数量'
          },
          {
            key: 'turn_over',
            label: '交易额'
          }
        ],
        body: [],
        footer: {
          total: 999,
          currentPage: 1
        },
        expand: {
          title: '渠道商交易额排名',
          path: 'rank-boss/2'
        }
      },
      {
        header: [
          {
            key: 'enterprise_name',
            label: '企业名称'
          },
          {
            key: 'bill_sum',
            label: '票据数量 '
          },
          {
            key: 'turnover',
            label: '交易额'
          }
        ],
        body: [],
        footer: {
          total: 999,
          currentPage: 1

        },
        expand: {
          title: '企业交易排名',
          path: 'rank-boss/3'
        }
      },
      {
        header: [
          {
            key: 'name',
            label: '客服名称'
          },
          {
            key: 'channelCount',
            label: '审票数量 '
          },
          {
            key: 'amount',
            label: '平局审票时长'
          }
        ],
        body: [],
        footer: {
          total: 999,
          currentPage: 1
        },
        expand: {
          title: '客服审票时长排名',
          path: 'rank-boss/4'
        }
      }
    ]
    @Getter userInfo
    

    makeChart (data) {
      let mc = data.myCommisionList.map(v => v[Object.keys(v)[0]])
      let cd = data.channelDealerList.map(v => v[Object.keys(v)[0]])
      let cc = data.channelCommisionList.map(v => v[Object.keys(v)[0]])
      let date = data.myCommisionList.map(v => Object.keys(v)[0])
      return {
        columns: ['日期', '我的利润', '渠道商佣金'],
        rows: date.map((v, i) => ({
          '日期': v,
          '我的利润': mc[i],
          '渠道商佣金': cd[i],
          '渠道专员佣金': cc[i]
        }))
      }
    }

    async getWallet () {
      let res: AjaxResponse = await this.$axios.post('b/boms/commision/statistics/info', {})
      this.wallet = res.data
    }

    async getChart () {
      let res: AjaxResponse = await this.$axios.post('b/boms/commision/statistics/list', {
        day: this.chartDate
      })
      this.$refs.charts.init(this.makeChart(res.data), {
        dimension: ['日期'],
        metrics: ['我的利润', '渠道商佣金', '渠道专员佣金'],
        // area: true,
        stack: { '利润': ['我的利润', '渠道商佣金', '渠道专员佣金'] }
        // itemStyle: {
        //   color: {
        //     type: 'linear',
        //     x: 0,
        //     y: 0,
        //     x2: 0,
        //     y2: 1,
        //     colorStops: [{
        //       offset: 0, color: 'rgba(78, 147, 255, 0.9)' // 0% 处的颜色
        //     }, {
        //       offset: 1, color: 'rgba(78, 147, 255, 0.2)' // 100% 处的颜色
        //     }]
        //   }
        // },
      })
    }

    async getPreviews () {
      let res: AjaxResponse = await this.$axios.get('b/boms/operator/admin')
      this.previews[0].value = res.data.overtimeOrder
      this.previews[1].value = res.data.allUncheckedBill
      this.previews[2].value = res.data.allToAdjustBill
      this.previews[3].value = res.data.allNewEnterprsie
      this.previews[4].value = res.data.allNewChannel
      this.previews[5].value = res.data.allEnterprsie
      //
      this.biList[0].value = res.data.monthBill
      this.biList[1].value = res.data.monthOrderSum
      this.biList[2].value = res.data.monthTurnover
      this.biList[3].value = res.data.monthCommision
      this.biList[4].value = res.data.dailyBill
      this.biList[5].value = res.data.dayOrderSum
      this.biList[6].value = res.data.dayTurnover
      this.biList[7].value = res.data.avgCommision
    }

    async getRank () {
      let res: AjaxResponse = await this.$axios.post('b/boms/rank/getForAdmin', {
        userId: this.userInfo.userId,
        type: 0,
        isHome: 1,
        currentPage: 1,
        pageSize: 5
      })
      if (res.responseCode === 200) {
        this.tableDataList[0].body = res.data.spec_rank.items
        this.tableDataList[1].body = res.data.channel_rank.items
        this.tableDataList[2].body = res.data.ent_rank.items
      }
    }

    mounted () {
      this.getWallet()
      this.getChart()
      this.getPreviews()
      this.getRank()
    }
  }
</script>
<style lang="less" scoped>
  .wallet {
    margin-top: 10px;
  }

  .statistics {
    display: flex;
    height: 430px;
    justify-content: space-between;
    margin-top: 10px;
    > div {
      width: 49.5%;
    }
  }

  .rank {
    display: flex;
    // height: 680px;
    justify-content: space-between;
    margin-top: 10px;
    flex-wrap: wrap;
    padding: 10px;
    > div {
      width: 49.5%;
      &:nth-child(n+3) {
        margin-top: 10px;
      }
    }
    .top {
      line-height: 28px;
      display: flex;
      justify-content: space-between;
      span {
        color: #4E93FF;
        font-size: 20px;
        border-bottom: 1px solid #4e93ff;
      }
      em {
        font-size: 14px;
        color: #999;
        cursor: pointer;
      }
    }
  }

</style>
